<template>
  <div>
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="checkPermission(['users@index']) && $store.state.user.queryShow"
    >
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 账号名 -->
        <el-form-item :label="$t('user.user1')">
          <el-input
            v-model="formInline.username"
            :placeholder="$t('user.user1')"
            clearable
          />
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item :label="$t('user.user2')">
          <el-input
            v-model="formInline.mobile"
            :placeholder="$t('user.user2')"
            clearable
          />
        </el-form-item>
        <!-- 状态 -->
        <el-form-item :label="$t('common.common19')">
          <el-select
            v-model="formInline.status"
            :placeholder="$t('common.common19')"
            clearable
          >
            <el-option
              v-for="item in statusSwitchList"
              :key="item.value"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">{{
            $t("common.common4")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <!-- 新建 -->
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addEdit('add')"
          v-permission="['users@save']"
          >{{ $t("common.common18") }}</el-button
        >
        <query-btn v-permission="['users@index']" />
      </div>
      <el-table
        :data="tableData"
        border
        highlight-current-row
        v-permission="['users@index']"
        :max-height="$store.state.app.tableHeight"
      >
        <el-table-column prop="id" label="ID" min-width="80" />
        <!-- 账号名 -->
        <el-table-column
          prop="username"
          :label="$t('user.user1')"
          min-width="180"
        />
        <!-- 姓名 -->
        <el-table-column prop="name" :label="$t('vip.vip14')" min-width="180" />
        <!-- 手机号 -->
        <el-table-column
          prop="mobile"
          :label="$t('user.user2')"
          min-width="180"
        />
        <!-- 状态 -->
        <el-table-column :label="$t('common.common19')" min-width="180">
          <template slot-scope="scope">
            <div
              class="switch"
              @click="
                switchClick(scope.row, checkPermission(['users@switchStatus']))
              "
              :class="checkPermission(['users@switchStatus']) ? '' : 'disabled'"
            >
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="2"
                disabled
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
        <!-- 部门 -->
        <el-table-column
          prop="department_name"
          :label="$t('user.user3')"
          min-width="180"
        />
        <!-- 角色 -->
        <el-table-column
          prop="dmoney"
          :label="$t('user.user4')"
          min-width="180"
          :show-overflow-tooltip="false"
        >
          <template slot-scope="scope">
            <div class="tooltip_false">
              <el-tag
                v-for="item in scope.row.roles"
                :key="item.id"
                class="margin3"
                >{{ item.role_name }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          :label="$t('common.common3')"
          min-width="160px"
          fixed="right"
          class-name="iconBtn"
          v-if="
            checkPermission([
              'users@restPassword',
              'users@read',
              'users@delete',
            ])
          "
        >
          <template slot-scope="scope">
            <div>
              <span
                @click="addEdit('pwd', scope.row.id)"
                v-permission="['users@restPassword']"
              >
                <!-- 重置密码 -->
                <btn-tip
                  :content="$t('vip.vip7')"
                  type="primary"
                  icon="el-icon-lock"
                ></btn-tip>
              </span>
              <span
                @click="addEdit('edit', scope.row.id)"
                v-show="scope.row.id !== 1 ? true : false"
                v-permission="['users@read']"
              >
                <!-- 编辑 -->
                <btn-tip
                  :content="$t('common.common20')"
                  type="success"
                  icon="el-icon-edit"
                ></btn-tip>
              </span>
              <span
                @click="deletes(scope.row, scope.row.id)"
                v-show="scope.row.id !== 1 ? true : false"
                v-permission="['users@delete']"
              >
                <!-- 删除 -->
                <btn-tip
                  :content="$t('common.common9')"
                  type="danger"
                  icon="el-icon-delete"
                ></btn-tip>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="count"
        :page.sync="lint.page"
        :page-size.sync="lint.limit"
        @pageChange="getList"
        v-permission="['users@index']"
      />
    </el-card>
    <!-- :getlevel="getlevel" -->
    <userAddEdit
      ref="userAddEdit"
      :getRolesList="getRolesList"
      :getdeptList="getdeptList"
    ></userAddEdit>
  </div>
</template>
<script>
import { statusSwitchList } from "@/assets/js/common";
import { getUserList, del, userSwitch, getlevel } from "@/api/system/user";
import { getRoles } from "@/api/system/role";
import { getList } from "@/api/system/dept";
import userAddEdit from "@/components/system/userAddEdit";

export default {
  components: {
    userAddEdit,
  },
  data() {
    return {
      loading: false,
      statusSwitchList: statusSwitchList,
      formInline: {
        username: "",
        mobile: "",
        status: "",
      },
      lint: {
        page: 1,
        limit: 10,
      },
      count: 0,
      tableData: [],
      getRolesList: [],
      getdeptList: [],
      // getlevel: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onSubmit() {
      this.loading = true;
      this.lint.page = 1;
      this.getList();
    },
    getList() {
      this.getRoles();
      this.deptGetList();
      getUserList(Object.assign({}, this.formInline, this.lint)).then((res) => {
        this.loading = false;
        if (res.code == 10000) {
          this.tableData = res.data;
          this.count = res.count;
        }
      });
    },
    addEdit(type, id) {
      this.$refs.userAddEdit.init(type, id);
    },
    switchClick(row, disabled) {
      // 暂无修改权限!
      if (!disabled) {
        this.$message({
          showClose: true,
          message: this.$t("common.common21"),
          type: "warning",
        });
        return false;
      }
      // var statusTitle = row.status == 1 ? "禁用" : "启用";
      var statusTitle =
        row.status == 1
          ? this.$t("common.common22")
          : this.$t("common.common23");
      // 是否
      this.$confirm(
        this.$t("common.common25") +
          statusTitle +
          ` ${row.username}  ${this.$t("user.user5")} `,
        statusTitle,
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: row.status == 1 ? "warning" : "success",
        }
      )
        .then(() => {
          userSwitch(row.id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消
            message: this.$t("common.common24"),
          });
        });
    },
    deletes(row, id) {
      // `此操作将删除 ${row.username} 账户, 是否继续?`,
      // 确定对${row.username}进行删除操作?
      // "确定删除？",
      this.$confirm(
        `${this.$t("common.common13")}${row.username}${this.$t(
          "common.common14"
        )}[${this.$t("common.common9")}]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          del(id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
    // 角色合集  上级合集
    getRoles() {
      getRoles().then((res) => {
        this.getRolesList = res.data;
      });
      // getlevel().then((res) => {
      //   this.getlevel = res.data;
      // });
    },
    deptGetList() {
      getList({ search_type: 2 }).then((res) => {
        this.getdeptList = res.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.margin3 {
  margin-left: 3px;
  margin-right: 3px;
}
>>>.tooltip_false{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>